/**
* 选择产权
*/
<template>
    <vp-dialog ref="editDialogRef" :span="4">
        <template #title>
            <vp-label zh="选择产权" en="" align="left" />
        </template>
        <vp-card class="mb5">
            <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                label-width="120px">
                <vp-search-row :show-more="showMore">
                    <vp-search-col>
                        <el-form-item prop="bh">
                            <template #label><vp-label zh="编号" en="" /></template>
                            <el-input v-model="searchForm.bh" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="mc">
                            <template #label><vp-label zh="名称" en="" /></template>
                            <el-input v-model="searchForm.mc" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                        <vp-btn-more @change="showMore = $event" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <el-table :data="tableData" ref="tableRef" highlight-current-row stripe border style="width: 100%"
                row-key="id" @row-click="handleRowClick">
                <el-table-column type="index" align="center" label="#">
                </el-table-column>
                <el-table-column prop="bh" show-overflow>
                    <template #header><vp-label zh="编号" en="" /></template>
                </el-table-column>
                <el-table-column prop="mc" show-overflow>
                    <template #header><vp-label zh="名称" en="" /></template>
                </el-table-column>
            </el-table>
        </vp-card>
        <template #footer>
            <vp-btn-empty @click="handleClear" />
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>

<script setup lang="ts" name="VpBasedataPropertyRightsDialog">
import { ref } from 'vue';
import request from '/@/utils/request';


const searchForm = ref({
    bh: "",
    mc: "",
});


const tableData = ref([]);
const loading = ref(false);
const callback = ref((data: any) => { });


const tableRef = ref();
const editDialogRef = ref();
const searchFormRef = ref();
const showMore = ref(false);

//选择的数据
const singleSelection = ref<null>(null);
const handleOpen = (param: any) => {
    singleSelection.value = null;
    if (param.callback && typeof param.callback === "function") {
        callback.value = param.callback;
    }
    editDialogRef.value.handleOpen();
    loadDataList();
}

const loadDataList = () => {
    loading.value = true;
    request.get('/basicData/propertyRights/list', {
        params: {
            ...searchForm.value
        }
    }).then(res => {
        tableData.value = res?.data || [];
    }).finally(() => {
        loading.value = false;
    })
}


const handleSearchReset = () => {
    searchFormRef.value.resetFields();
}

const handleRowClick = (row: any) => {
    tableRef.value.clearSelection();
    tableRef.value.toggleRowSelection(row, true);
    singleSelection.value = row;
}



const handleSave = () => {
    if (loading.value) {
        return;
    }
    callback.value(singleSelection.value);
    editDialogRef.value.handleClose();
}
const handleClear = () => {
    if (loading.value) {
        return;
    }
    callback.value({});
    editDialogRef.value.handleClose();
}

defineExpose({
    handleOpen
})
</script>
